<template>
  <div class="q-pa-md" style="min-width: 350px">
    <t-expansion>
      <t-expansion-item
        expand-separator
        icon=""
        label="面板一"
        :group="''"
        :disable="false"
      >
        <div>请将元素拖放到这里</div>
      </t-expansion-item>
      <t-expansion-item
        expand-separator
        icon=""
        label="面板二"
        :group="''"
        :disable="false"
      >
        <div>请将元素拖放到这里</div>
      </t-expansion-item>
    </t-expansion>
    <t-expansion
      ref="fasr_expansion092522"
      style="opacity: 100%"
      :accordion="false"
    >
      <t-expansion-item
        ref="fasr_expansion_item092532"
        style="opacity: 100%"
        label="面板1"
        :defaultOpened="true"

      >
        <div>123 </div>
      </t-expansion-item>
    </t-expansion>
    <!-- <t-list bordered class="rounded-borders">
      <t-expansion-item
        expand-separator
        icon="perm_identity"
        label="Account settings"
        caption="John Doe"
        :group="''"
      >
        <t-card>
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>

      <t-expansion-item
        expand-separator
        icon="signal_wifi_off"
        label="Wifi settings"
        :group="''"
      >
        <t-card>
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>

      <t-expansion-item
        expand-separator
        icon="drafts"
        label="Drafts"
        header-class="text-purple"
      >
        <t-card>
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>

      <t-expansion-item icon="assessment" label="Disabled" disable>
        <t-card>
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>
    </t-list> -->
  </div>
</template>
<script setup>
  import { onMounted, reactive } from 'vue';
  const staticItems = reactive([{ label: 'Disabled' }, { label: 'settings' }]);
  onMounted(() => {});
</script>
